<template>
  <div class="MonthSales">
    <EchartBox
      title-name="本月成交订单"
      tip="本月成交订单1000"
      num-value="1,000"
    >
      <template #picture>
        <div class="mt-10px w-full h-30px">
          <img src="../img/1689133465287.png" alt="" class="w-full h-full" />
        </div>
      </template>
    </EchartBox>
  </div>
</template>

<script setup name="monthlyOrders">
import EchartBox from './echartBox.vue'
</script>

<style scoped lang="scss">
.MonthSales {
  .data {
    border: 5px solid;
    border-left-color: transparent;
    border-right-color: transparent;
    position: relative;
    margin: 0 5px;
  }
  .data-up {
    border-bottom-color: red;
    border-top-color: transparent;
    top: -11px;
  }
  .data-down {
    border-bottom-color: transparent;
    border-top-color: rgb(75, 198, 128);
    top: 11px;
  }
  .content {
    @apply flex items-center text-15px mx-10px color-#999;
  }
}
</style>
